<template>
  <div>
    <div class="citySearch">
      <input v-model="keyword" class="searchInput" type="text" placeholder="输入城市名或拼音">
    </div>
    <div class="search-content" ref="search" v-show="keyword">
      <ul>
        <li class="search-item border-bottom" v-for="item of list" :key="item.id" @click="handleCityClick(item.name)">{{item.name}}</li>
        <li class="search-item border-bottom" v-show="hasNoData">没有找到匹配数据</li>
      </ul>
    </div>
  </div>
</template>

<script>
  import Bscroll from 'better-scroll'
  export default {
    name:'CitySearch',
    props:{
      cities:Object
    },
    data(){
      return {
        keyword:'',
        list:[],
        timer:null
      }
    },
    computed:{
      hasNoData(){
        return !this.list.length
      }
    },
    watch:{
      keyword(){
        if(this.timer){
          clearTimeout(this.timer)
        }
        if(!this.keyword){
          this.list = [];
          return;
        }
        this.timer = setTimeout(() => {
          const result = []
          for(let i in this.cities){
            this.cities[i].forEach((value) =>{
                if(value.spell.indexOf(this.keyword)>-1 || value.name.indexOf(this.keyword)>-1){
                  result.push(value)
                }
            })
          }
          this.list = result
        },100)

      }
    },
    mounted(){
      this.scroll = new Bscroll(this.$refs.search)
    },
    methods:{
      handleCityClick(city){
        this.$store.dispatch('changeCity',city)
        this.$router.push('/')
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .citySearch{
    height:.72rem;
    padding:0 .1rem;
    background:$bgColor;
    .searchInput{
      width:100%;
      padding:0 .1rem;
      text-align:center;
      height:.62rem;
      line-height:.62rem;
      border-radius:.06rem;
      box-sizing:border-box;
      color:#666;
    }
  }
  .search-content{
    position:absolute;
    top:1.58rem;
    left:0;
    right:0;
    bottom:0;
    z-index:100;
    overflow:hidden;
    background:#eee;
    .search-item{
      line-height: .62rem;
      padding-left: .2rem;
      background:#fff;
      color: #666;
    }
  }

</style>
